<template>
  <div>
    <el-row :gutter="24" style="margin: 0">
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0'}">
          <div slot="header" class="card_header">
            <div  class="header_text overflow" :title="$t('注册用户数')">{{ $t('注册用户数') }}</div>
            <div class="header_round">
              <i class="iconfont iconzhuce" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content" style="padding: 30px 0px">
            <span class="content_num">{{ data.registrationNumber }}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding: '0px'}">
          <div slot="header" class="card_header">
            <div   class="header_text overflow" :title="$t('进件数')">{{ $t('进件数') }}</div>
            <div class="header_round">
              <i class="iconfont icontaizhanshuliang" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('新客') }}</el-tag>
              <span class="content_num">{{ data.newInputNmber }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#EB6877" style="color: #ffffff" size="mini">{{ $t('老客') }}</el-tag>
              <span class="content_num">{{ data.oldInputNmber }}</span>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('终审')">{{ $t('终审') }}</div>
            <div class="header_round" style="background-color: #88ABDA">
              <i class="iconfont iconshenhe" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content" style="padding: 20px 15px">
            <el-row :gutter="24">
              <el-col :span="12" class="flex_center">
                <el-tag color="#80C269" style="color: #ffffff" size="mini">{{ $t('通过') }}</el-tag>
                <span class="content_num">{{ data.pass }}</span>
              </el-col>
              <el-col :span="12" class="flex_center">
                <el-tag color="#A0A0A0" style="color: #ffffff" size="mini">{{ $t('关闭') }}</el-tag>
                <span class="content_num">{{ data.close }}</span>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12" class="flex_center">
                <el-tag color="#E60012" style="color: #ffffff" size="mini">{{ $t('拒绝') }}</el-tag>
                <span class="content_num">{{ data.refuse }}</span>
              </el-col>
              <el-col :span="12" class="flex_center">
                <el-tag color="#8C97CB" style="color: #ffffff" size="mini">{{ $t('待审') }}</el-tag>
                <span class="content_num">{{ data.waitAudit }}</span>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('待打款')">{{ $t('待打款') }}</div>
            <div class="header_round">
              <i class="iconfont iconqianbao" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.waitPay }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.waitPayAmount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('打款')">{{ $t('打款') }}</div>
            <div class="header_round">
              <i class="iconfont iconjinbi" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.pay }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.payAmount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('还款')">{{ $t('还款') }}</div>
            <div class="header_round">
              <i class="iconfont iconhuikuan" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.refund }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.refundAmount }}</span></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('未到期')">{{ $t('未到期') }}</div>
            <div class="header_round">
              <i class="iconfont icondaoqishijian" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.notExpire }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.notExpireAmount }}</span>
            </div>

          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('逾期')">{{ $t('逾期') }}</div>
            <div class="header_round">
              <i class="iconfont iconyiyuqi" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.overdue }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.overdueAmount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" :xs="24" class="col_bottom">
        <el-card :body-style="{padding:'0px'}">
          <div slot="header" class="card_header">
            <div class="header_text overflow" :title="$t('待还')">{{ $t('待还') }}</div>
            <div class="header_round">
              <i class="iconfont icondengdaihuankuan" style="font-size: 27px"></i>
            </div>
          </div>
          <div class="card_content">
            <div class="flex_center">
              <el-tag color="#EC6941" style="color: #ffffff" size="mini">{{ $t('笔数') }}</el-tag>
              <span class="content_num">{{ data.wait }}</span>
            </div>
            <div class="flex_center" style="margin-top: 10px">
              <el-tag color="#A6937CFF" style="color: #ffffff" size="mini">{{ $t('金额') }}</el-tag>
              <span class="content_num">{{ data.waitAmount }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

  props: ['data'],
}
</script>

<style lang="less" scoped>
::v-deep .el-card {
  border-radius: 10px !important;
}

.col_bottom {
  margin-bottom: 35px;
}

.flex_center {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.card_content {
  padding: 15px;

  .content_num {
    font-size: 20px;
    height: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #6C6C6C;
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 10px;

  }

  .tags {
    background: #EB6877;
    border-radius: 4px;
    display: inline-block;
    color: #ffffff;
    width: 40px;
    margin-right: 10px;
    text-align: center;
    padding: 2px 0;
    font-size: 14px;
  }
}

::v-deep .el-card__header {
  padding: 10px 20px;
  background-color: #FFFBF5;
  border-bottom: 0;

  .card_header {
    display: flex;
    justify-content: space-between;

    .header_text {
      color: #242424;
      font-size: 18px;
      line-height: 40px;
    }

    .header_round {
      border-radius: 50%;
      background-color: #FF8D00FF;
      height: 40px;
      width: 40px;
      box-sizing: border-box;
      text-align: center;
      padding: 6px 0;
      color: #ffffff;
    }
  }


}
</style>
